<template>
	<div class="comment-reply">
		<!-- 头部信息 -->
		<van-nav-bar :title="`${comment.reply_count}条回复`">
			<van-icon slot="left" name="cross" @click="$emit('close')" />
		</van-nav-bar>
		<!-- 头部信息 -->
		
		<!-- 当前评论项 -->
		<comment-item :comment="comment" />
		<!-- 当前评论项 -->
		
		<!-- 所有评论回复 -->
		<van-cell title="所有回复" class="titles" />
		<comment-list :source="comment.com_id" type="c" class="list-r" :list="commentList" />
		<!-- 所有评论回复 -->
		
		<!-- 评论底部 -->
		<div class="reply-bottom">
			<van-button class="reply-btn" round @click="isPostShow = true">写评论</van-button>
		</div>
		<!-- 评论底部 -->
		
		<!-- 发布回复 -->
		<van-popup v-model="isPostShow" position="bottom">
			<post-comment :target="comment.com_id" :article-id="articleId" @post-success="onPostSuccess" />
		</van-popup>
		<!-- 发布回复 -->
	</div>
</template>

<script>
	import CommentItem from './comment-item.vue'
	import CommentList from './comment-list.vue'
	import PostComment from './post_comment.vue'
	
	export default {
		name:'CommentReply',
		components:{
			CommentItem,
			CommentList,
			PostComment
		},
		props: {
			comment: {
				type:Object,
				required:true
			},
			articleId: {
				type: [Number,String,Object],
				required:true
			}
		},
		data() {
			return {
				isPostShow:false,
				commentList: []
			}
		},
		methods:{
			onPostSuccess(comment) {
				this.commentList.unshift(comment)
				
				this.comment.reply_count++
				this.isPostShow = false
			}
		}
	}
</script>

<style scoped="scoped">
	.titles {
		text-align: center;
		
	}
	.list-r {
		margin-bottom: 44px;
	}
	.reply-bottom {
		height: 44px;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		border-top: 1px solid #f5f5f5;
		text-align: center;
	}
	.reply-btn {
		width: 210px;
		height: 28px;
		color: #ccc;
	}
</style>
